<template>


  <el-dropdown>
    <el-button class="editor-button-bar" title="超链接" type="info" plain icon="Link"></el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="addLink">添加链接</el-dropdown-item>
        <el-dropdown-item @click="removeLink">删除链接</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
  <el-dialog v-model="dialogFormVisible" title="插入超链接" width="500">
    <el-form :model="form">
      <el-form-item label="链接URL" :label-width="formLabelWidth">
        <el-input v-model="form.url" autocomplete="off" />
      </el-form-item>
      <el-form-item label="类型" :label-width="formLabelWidth">
        <el-select v-model="form.type">
          <el-option label="当前页面" value="_self" />
          <el-option label="新页面" value="_blank" />
        </el-select>
      </el-form-item>
      <el-form-item label="卡片风格" :label-width="formLabelWidth">
        <el-switch v-model="form.card" inline-prompt active-text="是" inactive-text="否" />
      </el-form-item>
      <el-form-item label="卡片名称" :label-width="formLabelWidth" v-if="form.card">
        <el-input v-model="form.title" autocomplete="off" />
      </el-form-item>
      <el-form-item label="卡片图片" :label-width="formLabelWidth" v-if="form.card">
        <el-row :gutter="10">
          <el-col :span="18">
            <el-input style="width: 250px;" v-model="form.src" autocomplete="off" />
          </el-col>
          <el-col :span="6">
            <el-button style="width: 100px;" type="success" @click="openImgWin" plain>上传图片</el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <div>
        <div class="skc-link-card" v-if="form.card">
          <div><img :src="form.src ? form.src : '/icon/link.png'"></div>
          <div class="skc-text-box">
            <span class="skc-text">{{ form.title }}</span>
            <span class="skc-link">{{ form.url }}</span>
          </div>
        </div>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" style="width: 100px;" @click="doAddLink()">
          插入
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="isOpenImgWin" title="图片上传" width="500">
    <file_upload_box :error-handle="imgErrorHandle" :updating-handle="imgUpdatingHandle" :multiple="false"
      :success-handle="imgSuccessHandle" :max-size="2 * 1024 * 1024" :ex-names="['jpg', 'png', 'jpeg', 'gif']">
    </file_upload_box>
  </el-dialog>
</template>
<script setup lang="ts">
import file_upload_box from "@/views/system/resourcefile/components/file_upload_box.vue";
import Farm2Request from "@/service/remoteRequests/Farm2Request";
import type { DataResponse } from "@/types/commons/DataResponse";
import { Editor } from "@tiptap/vue-3";
import { reactive, ref } from "vue";
import notice from '@/components/msg/FarmNotice';
const formLabelWidth = '80px'
const form = reactive({
  name: '',
  url: '',
  type: '_self',
  card: false,
  title: '',
  src: '',
})
const dialogFormVisible = ref(false)
const isOpenImgWin = ref(false);
const props = defineProps({
  editor: {
    type: Editor,
    required: true,
  }
});
//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
const imgSuccessHandle = (response: DataResponse) => {
  const img = response.data as { id: string, filename: string, title: string };
  console.log('上传成功');
  console.log(img.filename)
  form.src = Farm2Request.getFullPath('api/files/download/' + img.id);
  isOpenImgWin.value = false;
}
const openImgWin = () => {
  isOpenImgWin.value = true;
}
const addLink = () => {
  dialogFormVisible.value = true;
  form.url = '';
  form.card = false;
}
const imgUpdatingHandle = () => {
  //alert('图片上传中...');
}
const imgErrorHandle = (msg: { message: string }) => {
  notice.byError(msg.message);
}
const doAddLink = () => {
  if (!form.card) {
    //插入超链接
    props.editor
      .chain()
      .focus()
      .extendMarkRange('link')
      .setLink({ href: form.url, target: form.type })
      .run();
    dialogFormVisible.value = false;
  } else {
    if (form.url.trim() && form.title.trim()) {
      if (containsChinese(form.url)) {
        notice.byError('请检查链接地址');
      } else {
        //插入卡片
        insertCard(form.src ? form.src : '/icon/link.png', form.title, form.url);
        dialogFormVisible.value = false;
      }
    } else {
      notice.byError('请检查链接地址和链接名称');
    }
  }
}
function containsChinese(text: string): boolean {
  const chineseRegex = /[\u4e00-\u9fa5]/;
  return chineseRegex.test(text);
}

const insertCard = (src: string, text: string, href: string) => {
  props.editor.chain().focus()
    .insertContent([{ type: 'paragraph' },
    {
      type: 'linkcard', // 这里的 'linkcard' 是您在自定义节点中定义的 name
      attrs: {
        src,
        text,
        href,
      },
    }, { type: 'paragraph' },
    ])
    .run();
}


const removeLink = () => {
  props.editor
    .chain()
    .focus()
    .unsetLink()
    .run()
}


//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
</script>
<style scoped>
/* 样式可以根据需要添加 */
.editor-button-bar .el-button {
  width: 32px;
  height: 32px;
  margin: 1px;
}

.editor-button-bar .el-button {
  width: 32px;
  height: 32px;
  margin: 1px;
  border-color: #f4f4f5;
}

.editor-button-bar .el-dropdown {
  border: 0px solid #f4f4f5;
}
</style>
